<template>
	<view>
		<uni-forms ref="form">
			<uni-forms-item leftIcon="person" name="username" label='账  户:'>
				<input  :required="true" type="text" placeholder="请输入账户名" @input="binddata('username',$event.detail.value)" />
			</uni-forms-item>
			<uni-forms-item leftIcon="locked" name="password" label='密  码:'>
				<input  :required="true" type="text" :password="true" placeholder="请输入密码" @input="binddata('password',$event.detail.value)" />
			</uni-forms-item>
			<uni-forms-item leftIcon="locked" name="repassword" label='确  认:'>
				<input  :required="true" type="text" :password="true" placeholder="请再次输入密码" @input="binddata('repassword',$event.detail.value)" />
			</uni-forms-item>
			<view>密码规则：最少6位,最多18位，至少1个大写字母，1个小写字母，1个数字</view>
			<button @click="submit">注册</button>
		</uni-forms>
	</view>
</template>

<script>
	import {register, login} from '../../api/user.js'
	import {uniForms, uniFormsItem, uniIcons} from '@dcloudio/uni-ui'
	import { mapState,mapMutations } from 'vuex'

	export default {
	  name: 'register',
	  components: {
	    uniForms, uniFormsItem
	  },
	  onLoad(){

	  },
	  data() {
	    return {

	    }
	  },
	  methods: {
		...mapMutations({
			storeLogin: 'login' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
		}),
		login(username, password){
			login({username, password}).then(res=>{
				if(res.code === 200){
					uni.showToast({
						title: '登录成功'
					})
					this.storeLogin(res.data)
					if(res.data.schoolId){
						uni.switchTab({
							url: '/pages/home/index'
						})
					}else{
						uni.navigateTo({
							url: '/pages/guide/index'
						})
					}
				}
			})
		},
		submit(){
			const form = this.$refs.form
			form.submit()
			let res = form.formData
			let reg = /^.*(?=.{6,18})(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).*$/;
			if(!res.username){
				uni.showToast({title: '请输入用户名！', icon: 'none'}); return;
			}
			if(res.username.indexOf('baidu_') === 0){
				uni.showToast({title: '用户名不合法！', icon: 'none'}); return;
			}
			if(!reg.test(res.password)){
				uni.showToast({title: '密码不符合规范！', icon: 'none'}); return;
			}
			if(res.password !== res.repassword){
				uni.showToast({title: '两次密码输入不一致！', icon: 'none'}); return;
			}else{
				const {username, password} = res
				register({username,password}).then(res=>{
					if(res.code === 200){  // 注册成功
						uni.showToast({
							title: res.message
						})
						this.login(username, password)
					}else{
						uni.showToast({
							title: res.message
						})
					}
				})
			}
		},
	  }
	}
</script>

<style lang="scss">
	/* 头条、百度小程序组件内不能引入字体 */
	/* #ifdef MP-BAIDU */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
	/* #endif */
	page{
		padding: 30rpx;
	}
	button {
	   margin-top: 20rpx;
	   background-color: $theme-color;
	   color: #ffffff;
	   width: 600rpx;
	   &::after{
	     border: none;
	   }
	 }
	 // input{
		// border: 1rpx solid #555555;
		// border-radius: 5rpx;
		// height: 65rpx;
		// padding: 15rpx 25rpx;
		// line-height: 65rpx;
		// font-size: 28rpx;
		// background: #FFF;
	 // }
	 
	 input{
		border-bottom: 1rpx solid #999;
		height: 65rpx;
		padding: 15rpx 25rpx;
		line-height: 65rpx;
		font-size: 28rpx;
		background: #FFF;
	 }

	 .cp-link{
		text-align: center;
		margin-top: 20rpx;
	 }

	.footer{
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}
</style>
